<template>
  <div class="depositRecord">
    <Sidebar my_index="0"></Sidebar>
    <Header></Header>
    <div class="content">
      <div class="page-head">
        <div class="btn_file">
          <div class="file_box file_box1">
            <i class="iconfont icon-Excel"></i>
            <input
              type="file"
              id="excel-file"
              name="upload"
              class="file-btn"
              @change="exportExcel"
            >导入
          </div>
        </div>
      </div>
      <!-- <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
      </el-table> -->
      <div class="table_wrap">
        <table class="table table-order table-order-hover">
          <thead>
            <tr>
              <th>序号</th>
              <th>商品id</th>
              <th style="width:120px;">商品名称</th>
              <th>商品主图</th>
              <th>商品价格(单位：元)</th>
              <th>佣金</th>
              <!-- <th>淘口令(30天内有效)</th> -->
              <!-- <th>淘宝客短链接(300天内有效)</th>
              <th>优惠券短链接(300天内有效)</th> -->
              <th>优惠券淘口令(30天内有效)</th>
              <th>优惠券总量</th>
              <th>优惠券剩余量</th>
              <th>优惠券面额</th>
              <th>优惠券结束时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in orderList" :key="index">
              <td style="width:60px">
                <div class="ct" style="width:50px">{{index+1}}</div>
              </td>
              <td>
                <div class="ct">{{item.id}}</div>
              </td>
              <td style="width:120px;">
                <div class="ct" style="width:120px;">{{item.productName}}</div>
              </td>
              <td>
                <div class="ct"><img class="zhutu" :src="item.mainImg"/></div>
              </td>
              <td>
                <div class="ct">{{item.productPrice}}</div>
              </td>
              <td>
                <div class="ct">{{item.Commission}}</div>
              </td>
              <!-- <td>
                <div class="ct">{{item.Passwords}}</div>
              </td>
              <td>
                <div class="ct">{{item.shortLink}}</div>
              </td>
              <td>
                <div class="ct">{{item.couponLink}}</div>
              </td> -->
              <td>
                <div class="ct">{{item.couponPasswords}}</div>
              </td>
              <td>
                <div class="ct">{{item.couponSum}}</div>
              </td>
              <td>
                <div :class="['ct', item.couponRest ? '':'empty']">{{item.couponRest}}</div>
              </td>
              <td>
                <div class="ct">{{item.couponPrice}}</div>
              </td>
              <td>
                <div class="ct">{{item.endTime}}</div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
import Sidebar from '../components/sidebar'
import Header from '../components/header'
import * as axios from 'axios'
import XLSX from 'xlsx'
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      axios({
        method: 'post',
        url: 'http://www.ilove03.com/getDiscountList',
        responseType: 'json',
        data: {}
      }).then(response => {
        console.log(response, 'success')
      }).catch(e => {
      })
    },
    /**
     * 导入表格
     */
    exportExcel (e) {
      var self = this
      var files = e.target.files
      // var rABS = false
      var fileReader = new FileReader()
      fileReader.onload = function (ev) {
        try {
          var data = ev.target.result,
          workbook = XLSX.read(data, {
            type: ''
          }) // 以二进制流方式读取得到整份excel表格对象
          // persons = [] // 存储获取到的数据
        } catch (e) {
          console.error(e)
          self.$message.error("文件类型不正确")
          return
        }
        var exportList = JSON.parse(
          JSON.stringify(
            XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]])
          )
        )
        var jsonList = []
        if (exportList.length > 0) {
          jsonList = exportList
        }
        console.log("jsonList", jsonList, exportList)
        let orderList = self.orderList
        if (
          orderList.length === 1 &&
          !orderList[0].id &&
          !orderList[0].productName &&
          !orderList[0].couponRest
        ) {
          // 初始页面首行内容为空时导入
          self.orderList = jsonList
        } else {
          // 导入去重
          let repeatJsonList = [] // 重复数组
          orderList.forEach((fItem, f) => {
            repeatJsonList = repeatJsonList.concat(
              jsonList.filter((v, k) => {
                return (
                  v.id === fItem.id &&
                  v.productName === fItem.productName
                )
              })
            )
          })
          let filterJsonList = jsonList.filter(json => {
            // 去重
            console.log("导入表格", repeatJsonList, json)
            return repeatJsonList.indexOf(json) === -1
          })
          self.orderList = self.orderList.concat(filterJsonList)
        }
        if (orderList.length > 0) {
          self.countResult()
        } else {
          self.$message.error("暂无数据导入")
        }
      }
      // 以二进制方式打开文件
      fileReader.readAsBinaryString(files[0])
      // console.log('导入表格',e)
      e.target.value = ""
    }
  },
  components: {
    Sidebar,
    Header
  }
}
</script>
<style lang="less" scoped>
  
  .table_wrap{
    max-height: 100%;
    // overflow: auto;
    display: block;
    overflow-x: auto;
    border: 1px solid #b6ead6;
  }
  .table-order {
    > thead > tr > th {
      box-sizing: border-box;
    }
    > tbody > tr:nth-of-type(odd) {
      background-color: #fff;
    }
    > tbody > tr:nth-of-type(even) {
      background-color: #eeecec;
    }
    .el-form-item {
      margin-bottom: 0;
    }
    .ct {
      display: inline-block;
      min-width: 40px;
      &.empty{
        background: red;
      }
      .zhutu{
        width: 100px;
      }
    }
    .el-input {
      height: 36px;
      input {
        height: 100%;
      }
    }
    .el-dropdown {
      font-size: 1.1rem;
    }
  }
  .table-order-hover {
    > tbody > tr:hover {
      background-color: rgb(241, 241, 241);
    }
  }
  .btn_file {
    // padding-left: 58px;
    .el-button {
      width: 120px;
      height: 45px;
      span {
        vertical-align: middle;
        i {
          margin-right: 5px;
          vertical-align: middle;
        }
      }
    }
  }
  .file_box {
    display: inline-block;
    position: relative;
    font-weight: 500;
    height: 45px;
    width: 120px;
    text-align: center;
    font-size: 14px;
    line-height: 45px;
    border-radius: 4px;
    overflow: hidden;
    color: #1eb1b1;
    background: #e0f7f7;
    border: 1px solid #1eb1b1;
    cursor: pointer;
    vertical-align: middle;
    i:hover {
      color: #fff;
    }
    &:hover {
      color: #fff;
      background-color: #1eb1b1;
      border-color: #1eb1b1;
      cursor: pointer;
    }
  }
  .file_box1 {
    margin: 0 20px 0 0px;
    i {
      font-size: 26px;
      color: #1b8a4e;
      vertical-align: middle;
      margin-right: 5px;
    }
  }
  .file_box2 {
    a {
      display: block;
      width: 100%;
      height: 100%;
      &:hover {
        color: #fff;
      }
    }
  }
  .file-btn {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    outline: none;
    background-color: transparent;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    cursor: pointer;
  }
  </style>
